<template>
  <view class="gift_card_address">
    <view class="address_item"
      ><view class="label">收货人</view>
      <input v-model="form.name" placeholder="请输入"
    /></view>
    <view class="address_item">
      <view class="label">电话</view>
      <input v-model="form.phone" placeholder="手机号码"
    /></view>
    <view class="address_item"
      ><view class="label">选择地区</view>

      <view @click="popup = true">
        <view class="choose_text">{{ regionInfo || "请选择" }}</view>
      </view>

      <view class="form-position"> </view
    ></view>
    <view class="address_item"
      ><view class="label">详细地址</view>
      <input v-model="form.detailAddress" placeholder="街道 门牌信息" />
    </view>

    <view class="notice_text">
      <label>
        *请在提交前务必确认收货信息已完整、准确填写且收货地址不在限售区域内，成功提交收货信息后不再支持修改订单收货信息。
      </label>
      <label>
        *因产品特殊性，包裹送达后请当面确认包装箱完好以及蛋糕未变质后再签收;
        签收后及时放入冰箱冷冻保存。
      </label>
      <label>
        *因个人原因派送不成功、非本人亲自签收、联系方式无效、拒收、改签等情况，不予赔偿。
      </label>
    </view>

    <view class="submit_btn" @click.stop="onSubmit">提交</view>
    <view class="bottom_text" @click="toText('区域限购')"> 区域限购 </view>

    <oreo-popup
      position="bottom"
      :show="popup"
      custom-style="height: 550rpx;"
      @clickOverlay="popup = false"
      :overlay="true"
    >
      <custom-address @close="popup = false" @confirm="handleChooseLocation" />
    </oreo-popup>

    <notice-popup
      v-if="showNotice"
      :type="'address'"
      @close="showNotice = false"
    >
    </notice-popup>
    <!-- 区域限购 -->
    <text-popup
      v-if="showTextDialog"
      :keyName="textKey"
      @close="showTextDialog = false"
    >
    </text-popup>
  </view>


</template>

<script setup>
import NoticePopup from "./components/notice-popup.vue";
import TextPopup from "@/components/text-popup.vue";

import { computed, reactive, ref } from "vue";
import { onLoad, onShow, onUnload, onHide } from "@dcloudio/uni-app";
import { message } from "@/utils/utils";
import CustomAddress from "@/components/custom-address";
import { AddAddress, Subscribe } from "@/services/giftcard.js";
import privacyPopup from "@/components/privacy-popup";

let enterTime = "";
let outTime = "";
let stayTime = "";

const orderId = ref(0);
const form = reactive({});
const popup = ref(false);
const regionInfo = computed(() => {
  const { province, city, region } = form;
  return [province, city, region].filter((v) => v).join("");
});
const showNotice = ref(false);
const showTextDialog = ref(false);
const textKey = ref("");

onLoad((option) => {
  uni.hideShareMenu();
  orderId.value = option.orderId;
});
onShow(() => {
  // 用户进入时间
  enterTime = new Date();
  getApp().accessLogAdd();
});
onHide(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  getApp().emdlz2(
    "track",
    "event",
    "fc_fill_address",
    "view",
    "fc_address_page",
    stayTime
  );
});
onUnload(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  getApp().emdlz2(
    "track",
    "event",
    "fc_fill_address",
    "view",
    "fc_address_page",
    stayTime
  );
});

const handleChooseLocation = (e) => {
  Object.assign(form, {
    province: e[0],
    city: e[1],
    region: e[2],
    detailAddress: "",
  });
};
const onSubmit = async () => {
  // 订阅
  uni.requestSubscribeMessage({
    tmplIds: [process.env.FUNCARDDELIVERYNOTICE],
    success: async (res2) => {
      await Subscribe({
        appId: process.env.WXAPPID,
        orderId: orderId.value,
        scene: ["GIFTCARD_STATE_CHANGE"],
      });
    },
    fail: function (err) {
      console.log(err);
    },
  });

  const { name, phone, detailAddress, city } = form;
  if (!name) return message("请填写收货人姓名");
  if (
    !phone ||
    !/^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/.test(
      phone
    )
  )
    return message("请填写正确的联系电话");
  if (!detailAddress || !city) return message("请填写收件地址");

  const res = await AddAddress(orderId.value, form);
  if (res.code === 200) {
    uni.redirectTo({ url: "/funCard/success" });
  } else if (res.code === 480) {
    showNotice.value = true;
  } else {
    message(res.message);
  }

  getApp().emdlz2("track", "event", "fc_fill_address", "click", "fc_submit", "");
};

const toText = (key) => {
  getApp().emdlz2(
    "track",
    "event",
    "fc_fill_address",
    "click",
    "fc_purchase_restrictions_2",
    ""
  );
  showTextDialog.value = true;
  textKey.value = key;
};
</script>

<style lang="less" scoped>
.gift_card_address {
  position: relative;
  width: 375px;
  height: 100vh;
  background-color: #fff;
  box-sizing: border-box;
  padding: 9px 22px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  .address_item {
    width: 332px;
    height: 48px;
    line-height: 48px;
    border-bottom: 1px solid #c9c9c9;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    .label {
      width: 80px;
      font-size: 18px;
      font-weight: bold;
      color: #000000;
    }
    input {
      height: 48px;
      line-height: 48px;
      font-size: 15px;
      font-weight: 400;
      padding: 0 16px;
    }
    .choose_text {
      margin-left: 16px;
      color: #888888;
    }
  }
  .notice_text {
    width: 332px;
    font-size: 10px;
    color: #ff0000;
    position: absolute;
    bottom: 183px;
    text-align: center;
    label {
      display: block;
      margin-bottom: 6px;
    }
  }
  .submit_btn {
    width: 246px;
    height: 42px;
    text-align: center;
    line-height: 42px;
    background: #0044c9;
    box-shadow: 0px 4px 9px 0px rgba(0, 79, 234, 0.4);
    border-radius: 21px;
    font-size: 15px;
    color: #ffffff;
    position: absolute;
    left: 65px;
    bottom: 122px;
  }
  .bottom_text {
    width: 48px;
    height: 14px;
    line-height: 14px;
    border-bottom: 1px solid #0044c9;
    font-size: 12px;
    color: #0044c9;
    position: absolute;
    left: 164px;
    bottom: 101px;
  }
}
</style>
